<template>
  <div class="home">
    <!-- $store.state.count未进行模块化的写法 -->
    <!-- $store.state.模块名.count 进行模块化的写法 -->
    获取store的数据 : {{ $store.state.num.count }}
    <p>
      <button @click="cut">减一</button>
      <button @click="add">加一</button>
    </p>
    <h2>你的成绩:{{ $store.getters.filter }}</h2>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "Home",
  components: {
    // HelloWorld
  },
  created() {
    console.log(this.$store); //获取state里面的数据
  },

  methods: {
    add() {
      //调用store里面的mutations的方法(最好不要在组件直接调用mutations)
      // this.$store.commit("increment", { a: 3, b: 5 });
      //调用store里面的actions方法
      this.$store.dispatch("addNum", 2);
    },
    cut() {
      //mutations的写法：不推荐
      // this.$store.commit("decrement");
      //actions:推荐
      this.$store.dispatch("cutNum");
    }
  }
};
</script>
